<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <el-row>
      <el-tabs v-model="activeName" type="border-card" >

        <el-tab-pane label="绘制图形" name="first">
          <el-row :span="24">
            <el-col :span="3">
              <el-tag type="success">请选择折线X</el-tag>
            </el-col >
            <el-col :span="20">
              <el-radio-group v-model="xRadio" @change="" >
                <div  v-for="(item,index) in inputData" :key="index" style="float:left;margin-left:5px;margin-top:5px;padding-left:5px;">
                  <el-tooltip class="item" effect="dark" :content="item.type" placement="top">
                  <el-radio :label="item.columnName" :disabled="item.disabled" border>
                    {{item.columnName}}
                  </el-radio>
                  </el-tooltip>
                </div>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-divider> </el-divider>
          <!--选择Y轴数据-->
          <el-row :span="24">
            <el-col :span="3">
              <el-tag type="danger">请选择折线Y</el-tag>
            </el-col>
            <el-col :span="20">
              <el-radio-group v-model="yRadio" @change="" >
                <div v-for="(item,index) in inputData" :key="index"
                     style="float:left;margin-left:5px;margin-top:5px;padding-left:5px;">
                  <el-tooltip class="item" effect="dark" :content="item.type" placement="top">
                    <el-radio :label="item.columnName" :disabled="item.disabled" border>
                      {{item.columnName}}
                    </el-radio>
                  </el-tooltip>
                </div>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-divider ></el-divider>
          <el-row :span="24" style="margin-bottom: 10px;margin-top: 10px">
            <el-col :span="4" :offset="20">
              <el-button type="primary" @click="handleDrawLine" >绘制图形</el-button>
            </el-col>
          </el-row>
          <!--绘制图形按钮-->
          <el-row :span="24">
            <el-card>
              <echart-double-line ref="chartLine" :lineData="getLineData" style="height:350px;" ></echart-double-line>
            </el-card>
          </el-row>
        </el-tab-pane>

      </el-tabs>
    </el-row>

    <el-row style="float: right; margin-top: 10px; margin-bottom: 20px">
      <el-button @click="cancelMethod">取 消</el-button>
      <el-button type="primary" @click="StoreDataMethod">确 定</el-button>
    </el-row>
  </el-dialog>

</template>

<script>
  import { getDoubleLineChartDataApi } from '@/api/ChartApi'
  import { cloneDeep } from 'lodash'
  import echartDoubleLine from "@/views/system/flow/workbench/platformComponents/Chart/echartUtilComponent/echartDoubleLine";
  import SingleCsvInputNode from '../publicComponents/SingleCsvInputNode.js'

  export default {
    name: 'lineChart',
    components: {echartDoubleLine },
    props: [
      'dialogVisible'
    ],
    mixins:[SingleCsvInputNode],
    inject: ['root','flowchartId'],
    data() {
      return {
        // 单选X轴
        nodeName:'',
        xRadio: '1',
        yRadio: '1',
        // 输入列信息,从前节点获取
        inputData:[],
        inputId:'',
        flowchartNum:'',
        // api/ChartApi接口请求参数
        getLineChartDataParas:[{
          "column1":"",
          "column2":"",
          "datasets":"",
          "flowchartId":""
        }],
        // api/ChartApi后端获取的返回数据
        getLineData: null,
        activeName: 'first',
        formModel: {
          config:{
            selectDatasets:'',
            output:[]
          }
        }
      }
    },
    computed:{

    },
    created() {
      console.log('绘制图形模块初始化')
      this.flowchartNum = this.flowchartId

       // 根据列的类型判断,列状态是否禁用
      let dataMap = this.inputData
      let  optionArr = [];  //定义一个数组用来存放
      dataMap.map((item,index)=>{
        if(item.type==="String"){
          optionArr.push(Object.assign(item,{disabled:true}))    //  数组的每一行添加一个 disabled:'true'  属性
        }else{
          optionArr.push(Object.assign(item,{disabled:false}))
        }
      });
    },
    methods: {
      // 根据选择的列信息,请求后端数据并进行绘图
      handleDrawLine(){

        // 判断选择的列,是否满足绘图要求
        if (this.xRadio === this.yRadio) {
          this.$message({
            message: '选择的列是同一列,请重新选择',
            type: 'error'
          })
        } else {
          //将选择的X, Y赋值
          this.getLineChartDataParas["column1"] = this.xRadio
          this.getLineChartDataParas["column2"] = this.yRadio
          this.getLineChartDataParas["nodeName"] = this.nodeName
          this.getLineChartDataParas["flowchartId"] = this.flowchartNum
          // 调用api/ChartApi接口
          getDoubleLineChartDataApi(this.getLineChartDataParas).then(response => {
            //将返回数据赋值
            this.getLineData = response.data
            let resdata = JSON.parse(JSON.stringify(response.data))
            // 调用echarDoubleLine组件方法
            this.$refs.chartLine.drawLine(this.getLineData)
          })
        }
      },

      // 取消对话框
      cancelMethod() {
        this.$emit('close-dialog')
      },
      // 存储表单信息,并关闭对话框
      StoreDataMethod(e) {
        this.$emit('close-dialog')// 告诉父组件要修改管理窗口可视化的变量
        // 更新选择好的indvar和depvar到原有的模型 以便于再次打开knn分类组件的时候自变量和因变量处存放的仍然是上次选择好的值
        // 同时更新配置好的参数
        this.formModel.config.logicalForm = this.logicalform
        const { getSelected, update } = this.root.propsAPI
        const node = getSelected()[0]
        this.formModel.config.output = this.inputData
        update(node, this.formModel)
      },
       // 关闭对话框
      handleClose(done) {
        this.$emit('close-dialog')
      }

    }
  }
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }

  .el-radio__label {
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 18px;
    vertical-align: middle;
    display: inline-block;

  }
</style>
